<template>
	<view class="home">
		<scroll-view class="navscroll" scroll-x>
			<view class="item" :class="navindex == index ? 'active' :''" v-for="(item,index) in navitem" :key="item.id"
				@click="navshift(index,item.id)">{{item.classname}}</view>
		</scroll-view>
		<view class="contents">
			<view class="row" v-for="item in Newsitem" :key="item.id">
				<newsbox :item="item" @click.native="godatel(item)"></newsbox>
			</view>
		</view>
		<view class="nodata" v-if="!Newsitem.length">
			<image src="../../static/780 (1).jpg.png"></image>
		</view>
		<view :class="loding == 1 ? 'load' : '' "></view>
		<view :class="footer == 2 ? 'footer' : '' "></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navindex: 0,
				navitem: [],
				Newsitem: [],
				currentPage: 1,
				loding: 0,
				footer: 0
			}
		},
		// 触底函数
		onReachBottom() {
			if (this.currentPage >= 2) {
				this.footer = 2
				return
			}
			this.currentPage++
			this.getNewsdata()
		},
		// 监听页面加载
		onLoad() {
			this.getnavdata()
			this.getNewsdata()
		},
		// 监听页面卸载
		onUnload() {
			this.loding = 0
		},
		methods: {
			// nav高亮
			navshift(index, id) {
				this.navindex = index
				this.Newsitem = []
				this.currentPage = 1
				this.getNewsdata(id)
				this.loding = 1
			},
			// 跳转详情页
			godatel(item) {
				// 保留当前页面，跳转到应用内的某个页面
				uni.navigateTo({
					url: `/pages/info/info?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取nav导航信息
			getnavdata() {
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success: res => {
						this.navitem = res.data
					}
				})
			},
			// 获取新闻信息
			getNewsdata(id) {
				// 发起网络请求
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data: {
						cid: id,
						page: this.currentPage
					},
					success: res => {
						this.Newsitem = [...res.data, ...this.Newsitem]
						this.loding = 0
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navscroll {
		height: 100rpx;
		white-space: nowrap;
		background-color: #F8F8F8;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 9;

		/deep/::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			--webkit-appearance: auto !important;
			display: ·block;
		}

		.item {
			display: inline-block;
			margin: 0 30rpx;
			line-height: 100rpx;
			font-size: 38rpx;
			color: #333;

			&.active {
				color: #35BF72;
			}
		}
	}

	.contents {
		padding: 30rpx 20rpx 0;
		padding-top: 100rpx;

		.row {
			border-bottom: 1rpx dotted #b4b4b4;
			margin-bottom: 10rpx;
		}
	}

	.nodata {

		image {
			width: 100%;
			height: 600rpx;
		}
	}

	.load {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200rpx;
		height: 100rpx;
		background-color: #35BF72;
		text-align: center;
		line-height: 100rpx;
		color: #f8f8f8;
		border-radius: 10rpx;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

		&:before {
			content: '正在加载...';
		}
	}

	.footer {
		margin-top: 30rpx 0;
		text-align: center;
		color: #8a8a8a;

		&:before {
			content: '到底啦!';
		}

	}
</style>
